<!-- eslint-disable vue/valid-v-for -->
<template>
  <contentModel v-if="visible" title="新增平级节点" @close="handleCancel">
    <div>
      <div class="buttonbox">
        <a-button :disabled="!selectedKeys" @click="delect()">删除</a-button>
      </div>
      <editTable
        ref="editTableRef"
        v-model:selected-keys="selectedKeys"
        row-key="indexRow"
        :row-selection="rowSelection"
        :table-data="data"
        :columns="columns"
        :rules="rules"
        :secret-level-select="true"
        :show-add="false"
      >
        <template #name="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #secretLevel="{ record }">
          <secretLevelSelect v-model="record.secretLevel" />
          <!-- :secret-level="modadata.secretLevel" 限制节点不能高于上级节点 -->
        </template>
        <template #procurementClassification="{ record }">
          <DictSelect
            v-model="record.procurementClassification"
            allow-clear
            dict-type="categoryClassification"
            placeholder="请选择采购件分类"
          />
        </template>
        <template #province="{ rowIndex }">
          <a-input v-model="data[rowIndex].province" />
        </template>
        <template #categoryZero="{ record }">
          <DictSelect
            v-model="record.categoryZero"
            allow-clear
            dict-type="zeroLevelCategory"
            placeholder="请选择零级品类"
          />
        </template>
        <template #categoryName="{ record }">
          <a-input v-if="record.edit" v-model="record.categoryName" />
          <span v-else>{{ record.categoryName }}</span>
        </template>
        <template #categoryCode="{ rowIndex }">
          <a-input v-model="data[rowIndex].categoryCode" />
        </template>
        <template #reason="{ rowIndex }">
          <a-input v-model="data[rowIndex].reason" />
        </template>
        <template #preparedBy="{ record, rowIndex }">
          <searchItemUser
            v-model:code="record.preparedBy"
            v-model:name="record.name"
            :title="'申请人'"
            @update:item="handleUserChange($event, rowIndex)"
            @hander-clear="handerClear"
          />
        </template>
        <template #name6="{ rowIndex }">
          <a-space>
            <a-button @click="delectclick(rowIndex)"> 删除 </a-button>
          </a-space>
        </template>
      </editTable>
      <div class="addRow">
        <div class="footer-box">
          <span class="add-btn" @click="pushRow">
            <icon-plus style="margin-right: 6px" />
            新增行</span
          >
        </div>
      </div>
      <p v-show="data.length">
        新增数据合计<span style="color: #1e89ff; margin: 0 5px">
          {{ data.length }} </span
        >条
      </p>
    </div>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk">保存</a-button>
    </template>
  </contentModel>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent, reactive } from 'vue';
  import searchItemUser from '@/common/components/search-modal/user.vue';
  import { categoryAddlist } from '@/api/Basimanagementapi/categorymanagement';
  import secretLevelSelect from '@/common/components/cac-components/secret-level-select/index.vue';
  import editTable from '@/common/components/edit-table/index.vue';

  import DictSelect from '@/common/components/dict-select/index.vue';
  // import { Modal } from '@arco-design/web-vue';
  import { Message } from '@arco-design/web-vue';
  import lodash from 'lodash';
  import columns from './mymodalcolums';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  // 筛选弹出清除
  const handerClear = () => {
    console.log('ssss');
  };
  const handleUserChange = (v: string, index: number) => {
    // eslint-disable-next-line no-underscore-dangle
    data.value[index].username = v._rawValue.username;
    // eslint-disable-next-line no-underscore-dangle
    data.value[index].userCode = v._rawValue.userCode;
  };
  const rules = ref({
    secretLevel: [{ required: true, message: '请选择密级' }],
    procurementClassification: [{ required: true, message: '请选择采购分类' }],
    categoryCode: [{ required: true, message: '请输入品类编码' }],
    categoryName: [{ required: true, message: '请输入品类名称' }],
    reason: [{ required: true, message: '请输入新增/变更原因' }],
    preparedBy: [{ required: true, message: '请选择申请人' }],
  });
  const data = ref<any[]>([]);
  const props = defineProps({
    visible: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
    },
    modadata: {
      type: Object,
      default: null,
    },
    secretLevel: {
      type: String,
      default: null,
    },
  });
  const emit = defineEmits(['handleCancel', 'handleOk']);
  const selectedKeys = ref();
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
  });
  const delect = () => {
    const delData = lodash.cloneDeep(data);
    data.value = delData.value.filter(
      (item) => !selectedKeys.value.includes(item.indexRow)
    );
    selectedKeys.value = [];
  };
  const delectclick = (rowIndex: any) => {
    data.value.splice(rowIndex, 1);
  };
  const pushRow = () => {
    const obj = {
      indexRow: Math.random().toString(36).substr(2),
      categoryCode: '',
      secretLevel: '',
      preparedBy: '',
      reason: '',
      parentCategoryName: props.modadata.parentCategoryName,
      parentCategoryCode: props.modadata.parentCategoryCode,
      categoryName: '',
      edit: true,
      categoryHierarchy: props.modadata.categoryHierarchy,
      province: '',
      categoryZero: '',
      categoryStatus: '1',
      parentId: 'null',
      procurementClassification: '',
    };
    data.value.push(obj);
    console.log(data.value);
  };

  const handleCancel = () => {
    data.value = [];
    emit('handleCancel');
  };
  const editTableRef = ref();
  const handleOk = async () => {
    const val = await editTableRef.value.formCheck();
    if (!val) {
      data.value.forEach((v) => {
        v.parentId = props.modadata.parentId;
      });
      const addcherme = data.value;
      console.log(data.value, 'data.value');
      const data1 = await categoryAddlist(addcherme);
      if (data1) {
        Message.success('新增成功');
        data.value = [];
        emit('handleCancel');
      }
    }
  };
</script>

<style scoped lang="less">
  :deep(.arco-modal) {
    width: 1360px;
    height: 752px;
  }

  .a-modal {
    width: 800px;
  }

  .buttonbox {
    margin-bottom: 16px;
  }
  .addRow {
    width: 100%;
    cursor: pointer;
    text-align: center;
    padding: 5px;
    margin-top: 10px;
    border-radius: 6px;
    border: 1px dashed #ccc;
  }
</style>
